import 'package:flutter/material.dart';
import 'package:flutter_grammar/pages/tabs/category.dart';
import 'package:flutter_grammar/pages/tabs/home.dart';
import 'package:flutter_grammar/pages/tabs/setting.dart';

/* 
drawer参数可以定义左侧边栏，传入endDrawer可以定义右侧边栏。

DrawerHeader属性
decoration 设置顶部背景颜色
child 配置子元素
padding 内边距
margin 外边距

UserAccountsDrawerHeader的属性
decoration 设置顶部背景颜色
accountName 账户名称
accountEmail 账户邮箱
currentAccountPicture 用户头像
otherAccountsPictures 用来设置当前账户其他账户头像



自定义 AppBar
leading                在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
title                  标题，通常显示为当前界面的标题文字，可以放组件
actions                通常使用 IconButton 来表示，可以放按钮组
bottom                 通常放tabBar，标题下面显示一个 Tab 导航栏
backgroundColor        导航背景颜色
iconTheme              图标样式
centerTitle            标题是否居中显示

*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(home: Tabs()));
}

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;

  // 引入需要的tab
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FloatingActionButton'),
        backgroundColor: Colors.cyanAccent,
        leading: IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              print('menu Pressed');
            }),
        actions: <Widget>[
          IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('Search Pressed');
              }),
          IconButton(
              icon: const Icon(Icons.more_horiz),
              onPressed: () {
                print('more_horiz Pressed');
              })
        ],
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          ],
          currentIndex: _currentIndex,
          onTap: (val) {
            setState(() {
              _currentIndex = val;
            });
          },
          fixedColor: Colors.blueAccent),
      floatingActionButton: (Container(
        height: 48,
        width: 48,
        padding: EdgeInsets.all(0),
        margin: EdgeInsets.only(top: 10),
        decoration: BoxDecoration(
            color: _currentIndex == 1 ? Colors.red : Colors.blueAccent,
            borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          backgroundColor: _currentIndex == 1 ? Colors.red : Colors.blueAccent,
          onPressed: () {
            setState(() {
              _currentIndex = 1;
            });
          },
          child: Icon(Icons.add),
        ),
      )),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      // 配置 侧边抽屉
      drawer: DrawerPage(),
      endDrawer: Drawer(
        child: Text('右侧侧边栏'),
      ),
    );
  }
}

class DrawerPage extends StatelessWidget {
  const DrawerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: Column(
      children: <Widget>[
        UserAccountsDrawerHeader(
          accountName: const Text("大地老师"),
          accountEmail: const Text("dadi@itying.com"),
          currentAccountPicture: const CircleAvatar(
            backgroundImage:
                NetworkImage("https://www.itying.com/images/flutter/3.png"),
          ),
          decoration: const BoxDecoration(
              color: Colors.yellow,
              image: DecorationImage(
                  image: NetworkImage(
                      "https://www.itying.com/images/flutter/2.png"),
                  fit: BoxFit.cover)),
          otherAccountsPictures: <Widget>[
            Image.network("https://www.itying.com/images/flutter/4.png"),
            Image.network("https://www.itying.com/images/flutter/5.png"),
            Image.network("https://www.itying.com/images/flutter/6.png")
          ],
        ),
        const ListTile(
          title: Text("个人中心"),
          leading: CircleAvatar(child: Icon(Icons.people)),
        ),
        const Divider(),
        const ListTile(
          title: Text("系统设置"),
          leading: CircleAvatar(child: Icon(Icons.settings)),
        )
      ],
    ));
  }
}
